<template>
  <div class="box" ref="map"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits } from "vue";
import * as echarts from "echarts";
import china from "./china";
import pinyin from "pinyin"; // 引入拼音库

const emits = defineEmits(["getprovince"]); // 定义组件可以触发的事件

const map = ref();

onMounted(() => {
  let myChart = echarts.init(map.value);

  echarts.registerMap("china", china);
  // 省份名称到拼音的映射
  const provincePinyinMap = {
    // 此处提供了一些示例映射，你可以根据实际情况添加更多的映射
    西藏: "xizang",
    重庆: "chongqing",
    内蒙古: "neimeng",
    黑龙江: "heilong",
    // 其他省份...
  };
  myChart.setOption({
    geo: [
      {
        map: "china",
        roam: true,
        left: 150,
        top: 150,
        right: 150,
        zoom: 1.2,
        bottom: 0,
        label: {
          show: true,
          color: "white",
          fontSize: 14,
        },
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#043587",
              },
              {
                offset: 1,
                color: "#052348",
              },
            ],
            global: false,
          },
          opacity: 0.8,
        },
        emphasis: {
          itemStyle: {
            color: "#07809E",
          },
          label: {
            fontSize: 40,
            color: "#fff",
          },
        },
      },
    ],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
  });

  myChart.on("click", function (params) {
    var provinceName = params.name;
    provinceName = provinceName.replace(
      /(省|自治区|壮族自治区|回族自治区|维吾尔自治区|市|特别行政区)$/,
      ""
    );
    // 如果存在映射，则使用映射中的拼音，否则进行拼音转换
    var provincePinyin =
      provincePinyinMap[provinceName] ||
      pinyin(provinceName, {
        style: pinyin.STYLE_NORMAL,
      }).join("");

    // 触发组件事件，传递省份拼音
    emits("getprovince", { message: provincePinyin, whole: provinceName });
  });
});
</script>

<style scoped lang="ts">
</style>
